<template>
  <div class="login">
    <a-card class="card">
      <div class="header animated fadeInUp">
        <span>
          Nainu<small></small>
        </span>
      </div>
      <div class="body animated" @keyup.enter="login">
        <a-form>
          <a-input placeholder="用户名/邮箱" class="animated fadeInUp" v-model="form.username">
            <a-icon slot="prefix" type="user" class="icon" />
          </a-input>
          <a-input placeholder="密码" type="password" class="animated fadeInUp" v-model="form.password">
            <a-icon slot="prefix" type="lock" class="icon" />
          </a-input>
          <a-button type="primary" :loading="loading.submit" @click="login" class="animated fadeInUp">登录</a-button>
          <div class="item">
            <span class="left animated fadeInUp">
              其他登录：
              <a-icon type="qq" class="icon-qq" />
              <a-icon type="wechat" class="icon-wechat" />
            </span>
            <span class="right animated fadeInUp">
              <router-link :to="{ name: 'register'}">注册账户 <a-icon type="arrow-right" /></router-link>
            </span>
          </div>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script>

import md5 from 'md5'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'

export default {
    data () {
        return {
            loading: {
                submit: false
            },
            form: {
                username: '',
                password: ''
            }
        }
    },
    methods: {
        ...mapActions(['Login', 'Logout']),
        login () {
            const loginParams = { ...this.form }
            if (loginParams.username === null || loginParams.username === '') {
                this.$message.warning('用户名不可为空')
            } else if (loginParams.password === null || loginParams.password === '') {
                this.$message.warning('密码不可为空')
            } else {
                const { Login } = this
                this.loading.submit = true
                loginParams.password = md5(loginParams.password)
                Login(loginParams)
                    .then((res) => this.loginSuccess(res))
                    .catch(err => this.requestFailed(err))
                    .finally(() => {
                        this.loading.submit = false
                    })
            }
        },
        loginSuccess () {
            this.$router.push({ path: '/' })
            setTimeout(() => {
                this.$notification.success({
                    message: '欢迎',
                    description: `${timeFix()}，欢迎回来`
                })
            }, 1000)
        },
        requestFailed () {
            this.$message.error('用户名或密码不正确')
        }
    }
}
</script>

<style lang="less" scoped>
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }

    .login {
        .card {
            box-shadow: -4px 7px 46px 2px rgba(0,0,0,.1);
            border-radius: 5px;
            padding: 5px;

            .header {
                text-align: center;
                margin-top: 5px;
                margin-bottom: 10px;
                span {
                    vertical-align: text-bottom;
                    font-size: 38px;
                    display: inline-block;
                    font-weight: 600;
                    color: #1790fe;
                    background-image: linear-gradient(-20deg,#6e45e2,#88d3ce);
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }
                small {
                    margin-left: 5px;
                    font-size: 35%;
                }
            }

            .body {

                .ant-input-affix-wrapper {
                    margin: 10px 0px;

                    .icon {
                        color: #d9d9d9;
                    }
                }

                .ant-btn{
                    margin: 10px 0px;
                    width: 100%;
                    border-radius: 5px;
                }

                .item {
                    padding-top: 30px;
                    padding-bottom: 30px;

                    .right {
                        float: right;
                    }

                    .left {
                        float: left;
                        .anticon {
                            margin-right: 10px;
                            font-size: 18px;
                        }
                        .icon-qq {
                            color: rgb(35, 160, 240);;
                        }
                        .icon-wechat {
                            color: rgb(105, 187, 100);
                        }
                    }
                }
            }
        }
    }
    @media (min-width: 500px) {
        .login {
            text-align: center;
            margin-top: 40px;
            .card {
                text-align: center;
                width: 400px;
                margin:0 auto
            }
        }
    }
    @media (max-width: 500px) {
        .login {
            margin: 20px;
        }
    }
</style>
